//饼形图
function setPie(arr) {
  let mychart = echarts.init(document.querySelector(".pie"));
  let option = {
    //标题
    title: {
      text: "籍贯 Hometown",
      textStyle: {
        color: "#6d767e",
      },
    },
    //提示组件
    tooltip: {
      //各地人员分布
      formatter: "{a}<br />  {b}  <b>{c}</b>人 占比{d}%",
    },

    series: [
      {
        name: "各地人员分布",
        type: "pie",
        //圆形半径:  内圆  外圆
        radius: ["10%", "60%"],
        //圆心位置
        center: ["50%", "50%"],
        //面积模式或者半径模式
        roseType: "area",
        itemStyle: {
          //扇形圆角
          borderRadius: 4,
        },
        data: arr,
      },
    ],
  };
  mychart.setOption(option);
}
//调用函数
//setPie();

//折线图
function setline(obj) {
  let mychart = echarts.init(document.querySelector(".line"));
  let option = {
    //标题
    tooltip: {
      trigger: "axis",
      position: function (pt) {
        return [pt[0], "10%"];
      },
    },
    //标题
    title: {
      text: "新资 Salary",
      textStyle: {
        color: "#6d767e",
      },
    },
    //图件组件
    legend: {
      top: "20",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: obj.name,
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "50%"],
    },
    //
    dataZoom: [
      {
        //inside 鼠标滚轮实现缩放,slider通过滚动条实现缩放
        type: "slider",
        start: 0, //起始位置
        end: 10, //结束位置
      },
      {
        start: 0,
        end: 10,
      },
    ],
    series: [
      {
        name: "期望薪资",
        type: "line",
        symbol: "none",
        sampling: "lttb",
        //转折是否圆润
        smooth: true,
        itemStyle: {
          color: "#ee6666",
        },
        data: obj.salary,
      },
      {
        name: "实际薪资",
        type: "line",
        symbol: "none",
        //转折是否圆润
        smooth: true,
        sampling: "lttb",
        itemStyle: {
          color: "#5470c6",
        },
        data: obj.truesalary,
      },
    ],
  };
  mychart.setOption(option);
}
//调用
//setline();

//柱状图 barChart
function setBar(obj) {
  let mychart = echarts.init(document.querySelector(".barChart"));
  let option = {
    //网格
    grid: {
      top: 30,
      bottom: 30,
      left: "7%",
      right: "7%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {
      // data: ['平均分', '低于60人数分', '60到80分之间','高80分之间']
    },
    xAxis: [
      {
        type: "category",
        data: obj.group,
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: "{value} 分",
        },
      },
      {
        type: "value",
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: "{value} 人",
        },
      },
    ],
    series: [
      {
        name: "平均分",
        type: "bar",
        barWidth: "15", //设置柱子宽度
        yAxisIndex: 0, //0是第一个y轴,1是第二个y轴
        data: obj.avgScore,
      },
      {
        name: "低于60人数分",
        type: "bar",
        yAxisIndex: 1, //0是第一个y轴,1是第二个y轴
        barWidth: "15",
        data: obj.lt60,
      },
      {
        name: "60到80分之间",
        type: "bar",
        barWidth: "15",
        yAxisIndex: 1, //0是第一个y轴,1是第二个y轴
        data: obj.gt60,
      },
      {
        name: "高80分之间",
        type: "bar",
        barWidth: "15",
        yAxisIndex: 1, //0是第一个y轴,1是第二个y轴
        data: obj.gt80,
      },
    ],
  };
  mychart.setOption(option);
}
//调用
//setBar();

//地图
function setMap(a, b) {
  let mychart = echarts.init(document.querySelector(".map"));
  // 位置 + 经纬度
  var chinaGeoCoordMap = a;
  var chinaDatas = b;
  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
      if (fromCoord && toCoord) {
        res.push([
          {
            coord: fromCoord,
            value: dataItem[0].value,
          },
          {
            coord: toCoord,
          },
        ]);
      }
    }
    return res;
  };
  var series = [];
  [["顺义校区", chinaDatas]].forEach(function (item, i) {
    series.push(
      {
        type: "lines",
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: "arrow", //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.2, //尾迹线条曲直度
          },
        },
        data: convertData(item[1]),
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: "stroke", //波纹绘制方式 stroke, fill
          scale: 4, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: "right", //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {
              //圆环显示文字
              return params.data.name;
            },
            fontSize: 12,
          },
          emphasis: {
            show: true,
          },
        },
        symbol: "circle",
        symbolSize: function (val) {
          return 4 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: "#f00",
          },
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([
              dataItem[0].value,
            ]),
          };
        }),
      },
      //被攻击点
      {
        type: "scatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: "stroke",
          scale: 4,
        },
        label: {
          normal: {
            show: true,
            position: "right",
            offset: [5, 0],
            color: "#9eca7f", // 目标点文字颜色
            formatter: "{b}",
            textStyle: {
              color: "#9eca7f",
            },
          },
          emphasis: {
            show: true,
            color: "#f60", // 目标点鼠标移入的颜色
          },
        },
        symbol: "pin",
        symbolSize: 50,
        data: [
          {
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10]),
          },
        ],
      }
    );
  });

  let option = {
    title: {
      text: "来京路线 From",
      textStyle: {
        color: "#6d767e",
      },
    },
    // tooltip: {
    //   trigger: 'item',
    //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
    //   borderColor: '#FFFFCC',
    //   showDelay: 0,
    //   hideDelay: 0,
    //   enterable: true,
    //   transitionDuration: 0,
    //   extraCssText: 'z-index:100',
    //   formatter: function (params, ticket, callback) {
    //     //根据业务自己拓展要显示的内容
    //     var res = "";
    //     var name = params.name;
    //     var value = params.value[params.seriesIndex + 1];
    //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
    //     return res;
    //   }
    // },
    // backgroundColor: "#013954",
    // visualMap: { //图例值控制
    //   min: 0,
    //   max: 1,
    //   calculable: true,
    //   show: false,
    //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
    //   textStyle: {
    //     color: '#fff'
    //   }
    // },
    geo: {
      map: "china",
      zoom: 1.2,
      label: {
        emphasis: {
          show: false,
        },
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          // color: 'rgba(51, 69, 89, .5)', //地图背景色
          // color: '#5a6fc0', //地图背景色
          // borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1,
        },
        emphasis: {
          color: "rgba(37, 43, 61, .5)", //悬浮背景
        },
      },
    },
    series: series,
  };
  mychart.setOption(option);
}
//调用
//setMap();

//发送axios请求  数据
axios({
  url: "/student/overview",
  method: "get",
  //data: { 'post请求参数'},
  //params: { 'get请求参数'}
}).then(({ data: res }) => {
  //成功回调
  //console.log(res);
  //渲染页面
  document.querySelector(".total").innerHTML = res.data.total;
  document.querySelector(".avgSalary").innerHTML = res.data.avgSalary;
  document.querySelector(".avgAge").innerHTML = res.data.avgAge;
  document.querySelector(".proportion").innerHTML = res.data.proportion;
});

//点击柱状图的三个小点点让盒子显示隐藏
let btn = document.querySelector(".bar .btn");
let ul = document.querySelector("#batch");
btn.onclick = function () {
  if (ul.style.display == "none") {
    ul.style.display = "block";
  } else {
    ul.style.display = "none";
  }
};

//点击第几次成绩
let aList = document.querySelectorAll("a");
//注册点击事件
for (let i = 0; i < aList.length; i++) {
  aList[i].onclick = function () {
    // console.log(i + 1);
    //发送axios请求获取指定次数的成绩信息
    axios({
      url: "/score/batch",
      method: "get",
      params: { batch: i + 1 },
    }).then(({ data: res }) => {
      //成功回调
      //判断业务状态码
      if (res.code == 0) {
        //console.log(res.data);
        setBar(res.data);
      }
    });
  };
}
//页面一加载就渲染成绩
aList[0].click();

//需求4: 完成 折线图  拼图  地图数据渲染
//页面一加载  立即发送axios请求数据
axios({
  url: "/student/list",
  method: "get",
  //data: { 'post请求参数'},
  //params: { 'get请求参数'}
}).then(({ data: res }) => {
  if (res.code == 0) {
    //console.log(res);
    //折线图.需要数据  从res中遍历后,获取数据
    let lineData = {
      name: [],
      salary: [],
      truesalary: [],
    };
    //饼形图
    let pieData = [];
    //地图
    let mapData1 = { 顺义校区: [116.4551, 40.2539] };
    let mapData2 = [];

    //循环遍历
    res.data.forEach((ele) => {
      //折线图遍历,添加
      lineData.name.push(ele.name);
      lineData.salary.push(ele.salary);
      lineData.truesalary.push(ele.truesalary);

      //饼形图遍历添加
      //根据条件查询数组中元素的索引值,查到就获取索引值 ,查不到则说明元素不存在
      let index = pieData.findIndex((item) => item.name == ele.province); //条件:数组中元素的name值和学生的province是否相同
      //判断数组存不存在该省份
      if (index == -1) {
        //数组中不存在被该省份学生
        pieData.push({ value: 1, name: ele.province });
      } else {
        //数组值存在该省份省份学生,让value++
        pieData[index].value++;
      }

      //地图遍历添加
      mapData1[ele.county] = [ele.jing, ele.wei];
      //根据条件查询数组中元素的索引值,查到就获取索引值 ,查不到则说明元素不存在
      let i = mapData2.findIndex((item) => item[0].name == ele.county);
      //判断是否查询到元素
      if (i == -1) {
        mapData2.push([{ name: ele.county, value: 1 }]);
      } else {
        mapData2[i][0].value++;
      }
    });

    //把lineData  的数据渲染到   折线图里面
    setline(lineData);
    //把pieData   的数据渲染到   饼形图里面
    setPie(pieData);
    //把mapData1,mapData2   的数据渲染到   地图里面
    setMap(mapData1, mapData2);
    //console.log(pieData);
  }
});
